/**
 * @name: Footer
 * @Description:
 * @Author: 方琦
 * @Date: 2022/8/10 17:55
 **/
import React, {useEffect, useState} from 'react';
import {inject, observer} from "mobx-react";
import StartMenu from "./StartMenu";
import BreadCrumbs from "./BreadCrumbs";
import "../../assets/fonts/iconfont.css";
import footer from "./footer.module.css";

function Footer(props) {
    const [isHover, setHover] = useState(false);
    const [nowDate, setNowDate] = useState('');
    const [nowTime, setNowTime] = useState('');

    useEffect(() => {
        const timer = setInterval(function () {
            let date = new Date()
            let year = date.getFullYear().toString();
            let month = (date.getMonth() + 1).toString();
            let day = date.getDate().toString();
            let time = year + '-' + month + '-' + day;
            setNowDate(time)
        }, 1000)
        return () => {
            clearInterval(timer)
        }
    }, [])
    //获取年月日
    useEffect(() => {
        const timer = setInterval(function () {
            let date = new Date()
            let hours = date.getHours().toString();
            let minutes = date.getMinutes().toString();
            let time = hours + ':' + minutes
            setNowTime(time)
        }, 1000)
        return () => {
            clearInterval(timer)
        }
    }, [])

    return (
        <div className={`${footer.container} ${footer.clear}`}>
            <div className={`${footer.left} ${footer.leftFooter}`}
                 style={{backgroundColor: isHover ? '#51514D' : 'black'}}
                 onMouseEnter={() => setHover(true)}
                 onMouseLeave={() => setHover(false)}
                 onClick={() => props.menuStore.showStartMenu()}>
                <span className={footer.icon + " iconfont icon-Windows "}></span>
            </div>

            {/*面包屑*/}
            <div className={`${footer.left} ${footer.clear}`}>
                {props.menuStore.displayMenu && props.menuStore.displayMenu.map((item) => {
                    return (
                        <BreadCrumbs item={item} key={item.id}></BreadCrumbs>
                    )
                })}
            </div>

            {/*最右侧的icon和时间*/}
            <div className={`${footer.right} ${footer.rightFooter} ${footer.clear}`}>
                <div className={footer.left}><span className={footer.icon + " iconfont icon-duanxin"}></span></div>
                <div className={footer.left}><span className={footer.icon + " iconfont icon-xiaoxi"}></span></div>
                <div className={footer.left}>
                    {nowTime}
                    <br/>
                    <span>{nowDate}</span>
                </div>
            </div>

            {/*底部菜单部分*/}
            <StartMenu/>
        </div>
    )
}

export default inject("menuStore", "userStore")(observer(Footer))
